<template>
  <div class="common-detail-modal-component">
    <a-modal
      :open="open"
      :title="$t('notification.detail')"
      :footer="null"
      @cancel="updateOpen(false)"
      width="700px"
    >
      <div class="notification-detail">
        <h2 class="notification-title">{{ notification.title }}</h2>
        <div class="notification-meta">
          <span>
            <TagOutlined />
            <span v-if="notification.type === NotificationType.SYSTEM">{{ $t('notification.typeSystem') }}</span>
            <span v-else-if="notification.type === NotificationType.TASK">{{ $t('notification.typeTask') }}</span>
            <span v-else-if="notification.type === NotificationType.MESSAGE">{{ $t('notification.typeMessage') }}</span>
          </span>
          <span>
            <UserOutlined />
            {{ notification.senderName }}
          </span>
          <span>
            <CalendarOutlined />
            {{ formatDate(notification.createTime) }}
          </span>
          <span v-if="notification.readTime">
            <EyeOutlined />
            {{ formatDate(notification.readTime) }}
          </span>
        </div>
        <div class="notification-content">
          {{ notification.content }}
        </div>
        <div v-if="notification.link" class="notification-link">
          <a :href="notification.link" target="_blank">
            <LinkOutlined /> {{ $t('notification.relatedLink') }}
          </a>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { NotificationType } from '@/types/api/notification'
import type { Notification } from '@/types/api/notification'

defineOptions({
  name: 'NotificationDetailModal'
})

// Props定义
const props = withDefaults(defineProps<{
  open: boolean
  notification: Partial<Notification>
}>(), {
  notification: () => ({})
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
}>()

// 更新open状态
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 格式化日期
const formatDate = (date: string | undefined) => {
  return date ? new Date(date).toLocaleString() : ''
}
</script>

<style lang="scss" scoped>
.notification-detail {
  .notification-title {
    font-size: 18px;
    margin-bottom: 16px;
  }
  
  .notification-meta {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
    color: rgba(0, 0, 0, 0.45);
    
    span {
      margin-right: 24px;
      margin-bottom: 8px;
      
      .anticon {
        margin-right: 4px;
      }
    }
  }
  
  .notification-content {
    margin-bottom: 16px;
    white-space: pre-line;
    line-height: 1.8;
  }
  
  .notification-link {
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
  }
}
</style> 